<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3——边框处理</title>
    <style>
        .box {
            float: left;
            overflow: hidden;
            width: 100px;
            height: 100px;
            background: #1272cc;
            margin: 15px;
        }

        /* --- 圆角边框 --- */

        /* 四个角都是圆角效果 */
        .box_radius_all {
            border-radius: 16px;
        }

        /* 一次性设置4个角的圆角效果 */
        .box_radius {
            border-radius: 16px 0 16px 0;
            /* 顺序：上 右 下 左 */
        }

        /* 圆形效果，宽高必须一样，圆角为宽高一半 */
        .box_radius_circle {
            border-radius: 50px;
        }
        /* 上半圆效果，高是宽的一半，左上角、右上角圆角设置成高一样 */
        .box_radius_top_circle {
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        /* 下半圆效果，高是宽的一半，右下角和左下角圆角设置成高一样 */
        .box_radius_bottom_circle {
            height: 50px;
            border-radius: 0 0 50px 50px;
        }
        /* 左半圆效果，宽是高的一半，左上角、左下角圆角设置成高一样 */
        .box_radius_left_circle {
            width: 50px;
            border-radius: 50px 0 0 50px;
        }
        /* 右半圆效果，宽是高的一半，右上角、右下角圆角设置成高一样 */
        .box_radius_right_circle {
            width: 50px;
            border-radius: 0 50px 50px 0;
        }

        /* --- 阴影效果 --- */

        /* 外阴影 */
        .box_shadow {
            /* x轴偏移  y轴偏移  [模糊半径]  [阴影大小]  [颜色]  [投影方式 设置为inset是内阴影] */
            box-shadow: 5px 5px 5px 2px #000000;
        }
        /* 内阴影 */
        .box_shadow_inset {
            /* x轴偏移  y轴偏移  [模糊半径]  [阴影大小]  [颜色]  [投影方式 设置为inset是内阴影] */
            box-shadow: 5px 5px 5px 2px #000000 inset;
        }
        /* 外阴影和内阴影都设置 */
        .box_shadow_all {
            /* x轴偏移  y轴偏移  [模糊半径]  [阴影大小]  [颜色]  [投影方式 设置为inset是内阴影] */
            box-shadow: 5px 5px 5px 2px #000000, 5px 5px 5px 2px #000000 inset;
        }
        /* x轴偏离值为负数 */
        .box_shadow_x {
            /* x轴偏移  y轴偏移  [模糊半径]  [阴影大小]  [颜色]  [投影方式 设置为inset是内阴影] */
            box-shadow: -5px 5px 5px 2px #000000;
        }
        /* y轴偏离值为负数 */
        .box_shadow_y {
            /* x轴偏移  y轴偏移  [模糊半径]  [阴影大小]  [颜色]  [投影方式 设置为inset是内阴影] */
            box-shadow: 5px -5px 5px 2px #000000;
        }

        /* --- 自定义border为图片，前提是：border-style 不为 none，border-width 不为 0 --- */

        .box2 {
            float: left;
            overflow: hidden;
            width: 81px;
            height: 81px;
            background: #1272cc;
            margin: 15px;
        }

        /* 重复 */
        .box_border_image_repeat {
            border:27px solid gray;
            
            /* url("图片路径") 左上角裁切宽度 右上角裁切宽度 右下角裁切宽度 左下角裁切宽度 重复模式 */
            /* url("图片路径") 4个角统一裁切宽度 重复模式 */
            border-image:url("images/border.png") 27 repeat;

        }
        /* 平铺 */
        .box_border_image_round {
            border:27px solid gray;
            
            /* url("图片路径") 左上角裁切宽度 右上角裁切宽度 右下角裁切宽度 左下角裁切宽度 重复模式 */
            /* url("图片路径") 4个角统一裁切宽度 重复模式 */
            border-image:url("images/border.png") 27 round;

        }
        /* 拉伸 */
        .box_border_image_stretch {
            border:27px solid gray;
            
            /* url("图片路径") 左上角裁切宽度 右上角裁切宽度 右下角裁切宽度 左下角裁切宽度 重复模式 */
            /* url("图片路径") 4个角统一裁切宽度 重复模式 */
            border-image:url("images/border.png") 27 stretch;

        }
        /* 间隔平铺 */
        .box_border_image_space {
            border:27px solid gray;
            
            /* url("图片路径") 左上角裁切宽度 右上角裁切宽度 右下角裁切宽度 左下角裁切宽度 重复模式 */
            /* url("图片路径") 4个角统一裁切宽度 重复模式 */
            border-image:url("images/border.png") 27 space;

        }

    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box box_radius_all"></div>
    <div class="box box_radius"></div>
    <div class="box box_radius_circle"></div>
    <div class="box box_radius_top_circle"></div>
    <div class="box box_radius_bottom_circle"></div>
    <div class="box box_radius_left_circle"></div>
    <div class="box box_radius_right_circle"></div>
    <div class="box box_shadow"></div>
    <div class="box box_shadow_inset"></div>
    <div class="box box_shadow_all"></div>
    <div class="box box_shadow_x"></div>
    <div class="box box_shadow_y"></div>
    <div class="box2 box_border_image_repeat"></div>
    <div class="box2 box_border_image_round"></div>
    <div class="box2 box_border_image_stretch"></div>
    <div class="box2 box_border_image_space"></div>
</body>

</html>